
<template>
  <div class="common-details">
    <customDetailsTopbar flag :title="`${active}详情`" @back="back" />
    <div class="d-scroll ml-1 mr-1">
      <div v-if="listData.length > 0" class="common_list">
        <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToDetails(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.companyName }}
              </div>
              <ul>
                <li v-for="(desc, indexs) in descList" :key="desc.field">
                  <i :class="'iconfont c-text-color'+(indexs+1)" v-html="desc.icon" />
                  <div class="label">{{ desc.label }}：</div>
                  <div class="value">{{ item[desc.field] || '/' }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
  </div>
</template>
<script>
import { oneFourNewsLedger } from '@/api/safety'
import refHandler from '@/assets/mixin/refHandler'
import commonList from '@/assets/mixin/commonList'

export default {
  mixins: [commonList, refHandler],
  data() {
    return {
      current: '',
      active: '',
      companyId: '',
      listData: [],
      descList: [
        { label: '企业名称', icon: '&#xe62c;', field: 'companyName' },
        { label: '“四新”名称', icon: '&#xe62c;', field: 'fourNewsName' },
        { label: '是否完成安全评审', icon: '&#xe62c;', field: 'isSafeAudit' },
        { label: '“四新”种类', icon: '&#xe62c;', field: 'fourNewsType' }
      ],
      form: {
        pageNum: 1,
        pageSize: 10
      },
      pages: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      const { current, companyId, active } = this.$route.query
      this.companyId = companyId || ''
      this.current = current || ''
      this.active = active || ''
      this.getData()
    })
  },
  methods: {
    goToDetails(item) {
      if (this.active === '“四新”台账') {
        const { fourNewsId } = item
        const query = { id: fourNewsId, current: this.current, active: this.active }
        this.$router.push({
          path: '/staging/riskManagementDetail',
          query
        })
      }
    },
    handlePages(value) {
      this.form.pageNum = value
      this.getData()
    },
    getData() {
      this.$refs.customLoadmore.loadStatus = true
      oneFourNewsLedger({
        companyId: this.$route.query.companyId,
        companyName: this.$route.query.companyName,
        year: this.$route.query.year,
        pageNum: this.form.pageNum,
        pageSize: this.form.pageSize
      }).then(({ data, status }) => {
        if (status === 0 && data) {
          this.pages = data.pages
          this.listData = this.listData.concat(data.list)
        }
      })
      this.$refs.customLoadmore.loadStatus = false
    },
    back() {
      this.$router.replace({
        path: '/staging/riskManagement',
        query: { current: this.current, year: this.$route.query.year, active: this.active }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
